<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="content">
          <div class="nav">
            <navigation :msg="navMsg"></navigation>
          </div>
          <div class="content">
            <div class="head">
              <div class="index">
                <input type="text" placeholder="请输入角色" v-model="value" @input="eliminateF()">
                <span class="iconfont icon-test344" v-if="ok" @click="eliminateZ()"></span>
                <span class="iconfont icon-test126" @click="selects"></span>
              </div>
              <div class="tree-list-top-right">
                <span class="iconfont icon-test214 left"></span>
                <span>新增</span>
              </div>
            </div>
            <div class="notice">
              <div class="style">
                <el-row>
                  <el-col :span="2">序号</el-col>
                  <el-col :span="5">角色名称</el-col>
                  <el-col :span="13">备注</el-col>
                  <el-col :span="4">更行时间</el-col>
                </el-row>
              </div>

              <div class="scroll" v-if="!judgmentOfState">
                <el-row v-for="(site,key) in noticeData" :key="key">
                  <el-col :span="2">{{site.serialNumber}}</el-col>
                  <el-col :span="5" class="hover">
                    <router-link
                      :to="{name:'', params:{title:site.title,creationTime:site.creationTime}}"
                      class="hov"
                    >{{site.roleName}}</router-link>
                  </el-col>
                  <el-col :span="13">{{site.remarks}}</el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple">
                      {{site.updateTime}}
                      <div class="row">
                        <span class="edit" v-if="site.whether==0 ? true : false">编辑</span>
                        <span class="copy">复制</span>
                        <span class="del" v-if="site.whether==0 ? true : false">删除</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <div class="selects" v-if="judgmentOfState">
                <el-row v-for="(site,key) in arr" :key="key">
                  <el-col :span="2">{{site.serialNumber}}</el-col>
                  <el-col :span="5" class="hover">
                    <router-link
                      :to="{name:'', params:{title:site.title,creationTime:site.creationTime}}"
                      class="hov"
                    >{{site.roleName}}</router-link>
                  </el-col>
                  <el-col :span="13">{{site.remarks}}</el-col>
                  <el-col :span="4">
                    <div class="grid-content bg-purple">
                      {{site.updateTime}}
                      <div class="row">
                        <span class="edit" v-if="site.whether==0 ? true : false">编辑</span>
                        <span class="copy">复制</span>
                        <span class="del" v-if="site.whether==0 ? true : false">删除</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="page">
              <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
            </div>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import Paging from '@/components/common/paging/Paging'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      ok: false,
      judgmentOfState: false,
      arr: [],
      value: '',
      oldValue: '',
      noticeData: [
        {
          serialNumber: 1,
          roleName: '管理员-复制',
          remarks: '拥有系统所有权限',
          updateTime: '2018-10-26 18:56:00',
          whether: '0'
        },
        {
          serialNumber: 2,
          roleName: '只看库仓',
          remarks: '仓库管理',
          updateTime: '2018-10-26 18:56:00',
          whether: '1'
        }
      ],
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        }, {
          name: '权限设置',
          path: ''
        }
      ]
    }
  },
  created () { },
  methods: {
    selects () {
      this.arr = []
      let value = this.value
      let noticeData = this.noticeData
      if (value === '') {
        alert('null')
      } else if (value === this.oldValue) {
        noticeData.forEach((v, i) => {
          let serialNumber = v.serialNumber
          let roleName = v.roleName
          let remarks = v.remarks
          let updateTime = v.updateTime
          let whether = v.whether

          if (roleName.indexOf(value) >= 0) {
            this.arr.push({
              serialNumber: serialNumber,
              roleName: v.roleName,
              remarks: remarks,
              updateTime: updateTime,
              whether: whether
            })
          }
        })
      } else {
        this.judgmentOfState = !this.judgmentOfState
        noticeData.forEach((v, i) => {
          let serialNumber = v.serialNumber
          let roleName = v.roleName
          let remarks = v.remarks
          let updateTime = v.updateTime
          let whether = v.whether

          if (roleName.indexOf(value) >= 0) {
            this.arr.push({
              serialNumber: serialNumber,
              roleName: v.roleName,
              remarks: remarks,
              updateTime: updateTime,
              whether: whether
            })
          }
        })
      }
      this.oldValue = this.value
    },
    eliminateF () {
      if (this.value !== '') {
        this.ok = !this.ok
      }
    },
    eliminateZ () {
      this.value = ''
      this.ok = !this.ok
    },
    getPageId (id = 1) {
      this.pageId = id
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    Paging
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    background-color: #fff;
    width: 100%;
    height: 644px;
    box-sizing: border-box;
    .head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #20ade5;
      box-sizing: border-box;
      .index {
        margin-left: 20px;
        position: relative;
        input {
          width: 170px;
          height: 30px;
          font-size: 12px;
          border: 1px solid #e3e3e3;
          padding-left: 20px;
          padding-right: 80px;
          &:hover {
            border: 1px solid #3bc1f1;
          }
        }
        .icon-test344 {
          position: absolute;
          left: 200px;
          top: 12px;
          display: inline-block;
          font-size: 8px !important;
          color: rgb(151, 151, 151);
          cursor: pointer;
        }
        .icon-test126 {
          position: absolute;
          left: 221px;
          top: 1px;
          display: inline-block;
          width: 50px;
          height: 30px;
          color: #99a6c4;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          &:hover {
            background-color: #f1f8ff;
            color: #3bc1f1;
          }
        }
      }
      .tree-list-top-right {
        margin-right: 50px;
        .iconfont {
          cursor: pointer;
          margin-right: 5px;
        }
      }
    }
    .notice {
      .style {
        .el-row {
          background-color: #fcfcfc;
          border: 1px solid #e3e3e3;
          width: 100%;
          height: 50px;
          font-size: 12px;
          line-height: 50px;
          .el-col {
            &:first-child {
              text-align: center !important;
            }
          }
        }
      }
      .scroll,
      .selects {
        .el-row {
          width: 100%;
          height: 40px;
          font-size: 12px;
          line-height: 40px;
          border-bottom: 1px solid #e3e3e3;
          .hover:hover {
            .hov {
              color: #3bc1f1;
            }
          }
          .el-col {
            &:first-child {
              text-align: center !important;
            }

            .grid-content {
              display: flex;
              justify-content: space-between;
              white-space: nowrap;
              position: relative;
              .row {
                display: flex;
                position: absolute;
                top: 0px;
                right: 0px;
                .del,
                .edit,
                .copy {
                  display: inline-block;
                  width: 60px;
                  height: auto;
                  background-color: #a3bbd4;
                  color: #fff;
                  text-align: center;
                  display: none;
                  cursor: pointer;
                }
              }
            }
          }
          &:hover {
            background-color: #f5f5f5;
            .grid-content {
              .row {
                .del,
                .edit,
                .copy {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
    .page {
      border: 1px solid #e3e3;
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
}
</style>
